<template>
  <div class="detail">
    <!-- 返回上一页 和 分享组件 -->
    <toTip />
    <Swipe :bannerArr="gallery"></Swipe>
    <!-- 退货 -->
    <Tips></Tips>
    <!-- 商品信息 -->
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p>{{ info.goods_brief }}</p>
      <div>{{ info.retail_price }}</div>
    </div>
    <!-- 商品参数 -->
    <div class="attribute">
      <h4>商品参数</h4>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <span>{{ item.name }}</span>
          <section class="van-ellipsis">{{ item.value }}</section>
        </li>
      </ul>
    </div>
       <div class="title">
      <span>常见问题</span>
    </div>
    <ul class="issue">
      <li v-for="item in issue" :key="item.id">
        <h3>{{ item.question }}</h3>
        <p>{{ item.answer }}</p>
      </li>
    </ul>
    <!--相关产品  -->
    <div class="title">
      <span>相关产品</span>
    </div>
    <!-- 相关产品排列 -->
    <Products :goodsList="goodsList" />

    <!-- 加入购物车的底部栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/car')"
        :badge="badge"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCarMaskFn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规则弹窗 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="myref"
    />
  </div>
</template>

<script>
import { getDetail, getGoodsCount, addCaeData ,GetGoodsRelatedData} from "@/utils/http";
//引入轮播图
import Swipe from "@/components/Swipe.vue";
//30 天无忧退货
import Tips from "@/components/Tips.vue";
//引入相关产品组件
import Products from "@/components/Products.vue";
//返回分享
import toTip from "@/components/toTip.vue";
export default {
  name: "ProductDetail",
  data() {
    return {
      gallery: [], //详情页轮播图
      show: false, //是否显示规格面板
      issue: [], // 常见问题
      goods: {
        picture: "", //弹出的商品展示面板上的当前商品的缩略图
      }, //当前商品信息对象
      goodsId: "", //当前商品的id
      attribute: [], // 商品参数
      sku: {
        //商品数据
        tree: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      id: "", //产品id，来自productList的第一个数组项中的id
      badge: 0, //当前购物车总的商品数量
      info: {}, // 商品信息
      goodsList: [], // 相关产品列表
    };
  },
  components: {
    Swipe,
    Tips,
    Products,
    toTip,
  },
  created() {
    // console.log(this.$route.query);
    getDetail(this.$route.query).then((res) => {
      console.log(res);
      this.info = res.data.data.info; //商品信息
      this.attribute = res.data.data.attribute; // 商品参数

      this.gallery = res.data.data.gallery;
      this.gallery = this.gallery.map((item) => {
        item.image_url = item.img_url;
        return item;
      });
      // console.log(this.gallery);
      //给当前组件上的数据分别赋值
      this.goods.picture = res.data.data.info.list_pic_url;
      this.sku.price = res.data.data.info.retail_price;
      this.sku.stock_num = res.data.data.info.goods_number;
      this.goodsId = res.data.data.info.id;
      this.id = res.data.data.productList[0].id;
      this.issue = res.data.data.issue; //常见问题
    });
    //相关产品列表接口请求
    GetGoodsRelatedData({
      id: this.$route.query.id,
    }).then((res) => {
      // console.log(JSON.stringify(res))
      // console.log(33, res);
      this.goodsList = res.data.data.goodsList;
    });
    //获取当前购物车的总商品数量
    getGoodsCount().then((res) => {
      //   console.log(res);
      this.badge = res.data.data.cartTotal.goodsCount;
    });
  },
  methods: {
    addCarMaskFn() {
      //点击加入购物车弹窗
      this.show = true;
    },
    onBuyClicked() {
      //点击购买
      console.log("购买");
    },
    onAddCartClicked() {
      //点击加入购物车
      console.log("加入购物车");
      // 获取当前商品面板的组件实例对象,(该对象中getSkuData方法 可以获取到当前商品的数量)
      // console.log(this.$refs.myref.getSkuData());
      addCaeData({
        goodsId: this.goodsId,
        productId: this.id,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          //添加购物车成功
          this.show = false;
          //隐藏面板
          //获取当前商品的总数量并赋值给badge
          this.badge = res.data.data.cartTotal.goodsCount;
          this.$toast({
            type: "success",
            message: "加入成功",
            duration: 1000,
          });
        } else {
          //加入失败
          this.$toast({
            type: "fail",
            message: "加入失败",
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.info {
  background: #fff;
  text-align: center;
  padding: 0.2rem 0;
  h3 {
    font-weight: normal;
    font-size: 0.2rem;
    line-height: 0.5rem;
  }
  p {
    color: #999;
    font-size: 7px;
    line-height: 0.3rem;
  }
  div {
    color: darkred;
    font-size: 0.14rem;
    line-height: 0.3rem;
  }
  /deep/.van-icon-passed:default {
    width: 3px;
    height: 3px;
  }
}
.attribute {
  margin-top: 0.2rem;
  background: #fff;
  padding: 0.2rem 4%;
  h4 {
    font-weight: normal;
    text-align: center;
    font-size: 10px;
    margin-bottom: 0.2rem;
  }
  ul {
    li {
      background: #efefef;
      font-size: 7px;
      line-height: 10px;
      height: 10px;
      margin-bottom: 0.1rem;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      span {
        width: 30%;
        text-align: right;
      }
      section {
        flex: 1;
        padding-left: 0.2rem;
      }
    }
  }
}
.title{
  text-align: center;
  font-size: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  
}
/deep/.van-ellipsis{
    font-size: 15px;
  }
 /deep/.price{
  margin-top: 5px;
    font-size: 10px;
  }
  .issue {
    padding: 0 4%;
    background: #fff;
    li {
      h3 {
        font-size: 8px;
        height: 13px;
        line-height: 13px;
        padding-left: 5px;
        position: relative;
        font-weight: normal;
        &::before {
          content: "";
          width: 4px;
          font-size: 7px;
          height: 7px;
          background: darkred;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -2px;
        }
      }
      p {
        font-size: 7px;
        line-height: 7px;
        padding-left: 5px;
      }
    }
  }
</style>